import "package:flutter/material.dart";

class ScrollPage extends StatefulWidget {
  ScrollPage({super.key});

  @override
  State<ScrollPage> createState() {
    return ScrollPageState();
  }
}

class ScrollPageState extends State<ScrollPage> {
  final List<String> _list = List.generate(100, (index) => '列表$index');
  ScrollController _controller = ScrollController(); //滚动监听控制器
  bool _showTopBtn = false; //是否显示回到顶部按钮
  int _progress = 0; //当前滚动进度

  @override
  void initState() {
    super.initState();

    _controller.addListener(() {
      double offset = _controller.offset;
      // print('[_controller.offset]:$offset');
      if (offset < 1000 && _showTopBtn) {
        setState(() {
          _showTopBtn = false;
        });
      } else if (offset >= 1000 && !_showTopBtn) {
        setState(() {
          _showTopBtn = true;
        });
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('滚动')),
      body: Column(
        children: [
          Expanded(
              flex: 1,
              // 一般listView构造器
              child: Scrollbar(
                  //listView.builder或separated都是懒加载且会销毁，当加载列表元素时才会执行
                  child: NotificationListener<ScrollNotification>(
                      onNotification: (ScrollNotification notification) {
                        var pixels = notification.metrics.pixels;//当前滚动位置
                        var maxScrollExtent =
                            notification.metrics.maxScrollExtent;//最大可滚动长度
                        double progress = pixels / maxScrollExtent;
                        setState(() {
                          _progress = (progress * 100).toInt();
                        });

                        return false;//是否终止冒泡
                      },
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          ListView.builder(
                            controller: _controller, //添加滚动控制器
                            itemBuilder: (BuildContext context, int index) {
                              // print('[index]:$index');
                              return ListTile(
                                title: Text(_list[index]),
                              );
                            },
                            itemCount: _list.length,
                            // itemExtent:56,//每个列表元素高度，当列表元素的高度相同，则可以设置，与prototypeItem互斥
                            prototypeItem: const ListTile(
                              title: Text(''),
                            ), //列表元素模板，当列表元素使用同一个模板（高度相同），则可以设置，与itemCount互斥
                          ),
                          CircleAvatar(
                            radius: 30,
                            backgroundColor: Colors.black54,
                            child: Text(
                              "$_progress%",
                              style: TextStyle(color: Color(0xffffffff)),
                            ),
                          )
                        ],
                      )))
              // 含分隔listView构造器
              // child: ListView.separated(
              //     itemBuilder: (BuildContext context, int index) {
              //       return ListTile(
              //         title: Text(_list[index]),
              //       );
              //     },
              //     separatorBuilder: (BuildContext context, int index) {
              //       return Divider();
              //     },
              //     itemCount: _list.length),
              )
        ],
      ),
      floatingActionButton: _showTopBtn
          ? FloatingActionButton(
              onPressed: () {
                // 回到顶部
                // _controller.animateTo(0, //滚动到的高度
                //     duration: const Duration(milliseconds: 300), //动画时间
                //     curve: Curves.ease); //动画函数
                _controller.jumpTo(0);
              },
              child: const Icon(Icons.arrow_upward),
            )
          : null,
    );
  }
}
